﻿@inherits NITASA.Views.AutofacEnabledViewPage<NITASA.Data.PageModel>
@using NITASA.Services.Security
@using NITASA.Data
@using NITASA.Areas.Admin.Helper
@{
    if (Model == null)
    {
        ViewBag.Title = "New Page";
    }
    else
    {
        ViewBag.Title = "Update Page";
    }
    string Addons = Functions.GetAddons();
    string Sliders = Functions.GetSliders();
}
@section PageLevelStyles{
    <style type="text/css">
        #slug-container {
            color: #666;
            line-height: 24px;
            margin-top: 5px;
            min-height: 25px;
            padding: 0 10px;
        }

        strong {
            font-weight: 600;
        }

        #slug-container {
            color: #666;
            line-height: 24px;
        }

        .editable-container span {
            background-color: #fffbcc;
        }

        .editable-container input {
            font-size: 13px;
            height: 22px;
            margin: 0;
            width: 16em;
        }

        .slug-buttons .button-small {
            border-color: #ccc;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            color: #555;
            cursor: pointer;
            font-size: 13px;
            line-height: 18px;
            padding: 0 10px 1px;
        }

        .slug-buttons .cancel {
            font-size: 11px;
            margin-right: 10px;
        }
    </style>
    <script type="text/javascript" src="@Url.Content("~/Areas/Admin/assets/js/tinymce/tinymce.min.js")"></script>
    <script type="text/javascript">
        $ext = 'span[id|name|class|style],html,head,body';
        var popuptype = "cover";
        tinyMCE.init({
            selector: ".edtr",
            theme: "modern",
            menubar: false,
            plugins: [
                "advlist autolink lists link image charmap preview hr anchor",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor colorpicker textpattern "
            ],
            toolbar1: "undo redo | styleselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | Variables | mediaimages | code | Addons | Sliders",
            image_advtab: false,
            extended_valid_elements: $ext,
            force_br_newlines: false,
            force_p_newlines: false,
            forced_root_block: '',
            setup: function (editor) {
                editor.addButton('Addons', {
                    text: 'Addons',
                    type: 'menubutton',
                    icon: false,
                    menu: @Html.Raw(Addons)
                });
                editor.addButton('Sliders', {
                    text: 'Sliders',
                    type: 'menubutton',
                    icon: false,
                    menu: @Html.Raw(Sliders)
                });
                editor.addButton('mediaimages', {
                    text: '',
                    title: 'Insert image',
                    icon: 'mce-ico mce-i-image',
                    onclick: function () {
                        popuptype = "editor";
                        $("#MediaPopup").modal('show');
                    }
                });
            }
        });
    </script>
}
<div class="main-content">
    <div class="container-fluid padded">
        @if (TempData["SuccessMessage"] != null)
        {
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["SuccessMessage"]
            </div>
        }
        @if (TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert" type="button">
                    ×
                </button>
                @TempData["ErrorMessage"]
            </div>
        }
        <div id="containerfluid"></div>
        <div class="row-fluid">
            @using (Html.BeginForm("Add", "Page", FormMethod.Post, new { id = "frm1" }))
            {
                <input type="hidden" id="SaveType" name="SaveType" />
                if (@Model != null)
                {
                    @Html.HiddenFor(m => m.content.ID)
                    @Html.HiddenFor(m => m.content.GUID)
                }
                <div class="span12" style="margin-left: 0px;">
                    <div class="box">
                        <div class="box-header">
                            <span class="title"><i class="icon-tasks"></i>&nbsp; @(Model == null ? "New Page" : "Edit Page")</span>
                            @if (Model != null && Model.content != null && Model.content.GUID != null)
                            { 
                                <div class="span4 title pull-right" style="float:right;margin-right:10px;"><div class="inline pull-right">Status : @(Model.content.isPublished ? "Published" : "Draft")</div></div>
                            }
                        </div>
                        <div class="box-content">
                            <div class="padded">
                                <div class="span12">
                                    <div class="span9">
                                        <div class="control-group">
                                            <div class="controls">
                                                @Html.TextBoxFor(mbox => mbox.content.Title, new { placeholder = "Page Title", @class = "width100per", style = "margin-bottom: 0px;" })
                                                <div style="color: red">
                                                    @Html.ValidationMessageFor(m => m.content.Title)
                                                </div>
                                                <div>
                                                    <div id="slug-container">
                                                        <strong>Permalink:</strong>
                                                        <span>@(Request.Url.AbsoluteUri.Replace(Request.Url.AbsolutePath,""))/Content/
                                                            <span class="editable-container" style=" margin-left: -3px;">
                                                                <span id="editable-slug">@(Model != null ? Model.content.URL : "")</span>
                                                                <input type="text" value="@(Model != null ? Model.content.URL : "")" id="edit-slug-text" style="display: none;" />
                                                            </span>
                                                        </span>&lrm;
                                                        <span class="slug-buttons">
                                                            <a id="edit-slug" class="button-small" href="#">Edit</a>
                                                            <a id="save-slug" class="button-small" href="#" style="display: none;">OK</a>
                                                            <a href="#" id="cancel-slug" class="cancel" style="display: none;">Cancel</a>
                                                            @if (ViewBag.isIndexpage == null)
                                                            {<a href="#" id="pagePreview" class="button-small">Preview</a>}
                                                        </span>
                                                        @Html.HiddenFor(m => m.content.URL)
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <div class="controls">
                                                <label>
                                                    <b>Page Content: </b>
                                                </label>
                                                <div>
                                                    @Html.TextAreaFor(m => m.content.Description, new { @class = "edtr", style = "width: 100%; max-width: 98%; height:500px; margin: 0px; overflow: hidden; word-wrap: break-word;resize:vertical;" })
                                                    @*@class = "textarea-html5", *@
                                                    <div style="color: red">
                                                        @Html.ValidationMessageFor(m => m.content.Description)
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span3">
                                        <div class="padded" style="padding: 0px 4px 13px 4px; ">
                                            @if (aclService.HasRight(Rights.PublishOwnPages))
                                            {
                                                <input type="button" id="btnPublish" class="btn btn-small btn-green 3" style="text-align: center; width: 60px;"
                                                       value="Publish" />
                                            }
                                            else if (Model != null && Functions.CurrentUserID() == Model.content.AddedBy)
                                            {
                                                <input type="button" id="btnPublish" class="btn btn-small btn-green 2" style="text-align: center; width: 60px;"
                                                       value="Publish" />
                                            }
                                            else if (Model != null && Functions.CurrentUserID() != Model.content.AddedBy)
                                            {
                                                <input type="button" id="btnPublish" class="btn btn-small btn-green 1" style="text-align: center; width: 60px;"
                                                       value="Publish" />
                                            }
                                            @if (ViewBag.isIndexpage == null)
                                            {
                                                <input type="button" id="btnDraft" class="btn btn-small btn-blue" style="text-align: center; width: 90px;"
                                                       value="Save to Draft" />
                                            }
                                            &nbsp;<input type="button" class="btn btn-small btn-red" style="text-align: center; width: 60px;" value="Back"
                                                   onclick="window.location = '/Admin/Page/List';" />
                                        </div>
                                        <div class="box">
                                            <div class="box-header">
                                                <span class="title">Meta</span>
                                            </div>
                                            <div class="box-content">
                                                <div class="padded">
                                                    @Html.TextBoxFor(m => m.meta.Title, new { placeholder = "Title", @class = "width100per", id = "txtMetaTitle" })
                                                    @Html.TextBoxFor(m => m.meta.Keyword, new { placeholder = "Keyword", @class = "width100per", id = "txtMetaKeyword" })
                                                    @Html.TextBoxFor(m => m.meta.Description, new { placeholder = "Description", @class = "width100per", id = "txtMetaDescription" })
                                                    @Html.TextBoxFor(m => m.meta.Author, new { placeholder = "Author Name", @class = "width100per", id = "txtMetaAuthor" })
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="box" style="display:@(ViewBag.isIndexpage != null?"":"none")">
                                            <div class="box-header">
                                                <span class="title">Layout</span>
                                            </div>
                                            <div class="box-content">
                                                <div class="padded" style="text-align: left; vertical-align: top">
                                                    <label>
                                                        <b>Content Position: </b>
                                                    </label>
                                                    @Html.DropDownListFor(m => m.content.ContentPosition, new List<SelectListItem>()
                                                                { 
                                                                    new SelectListItem { Text = "Above Posts", Value = "AbovePosts" },
                                                                    new SelectListItem { Text = "Below Posts", Value = "BelowPosts" }
                                                                }, new { @class = "chzn-select" })
                                                </div>
                                            </div>
                                        </div>
                                         <div class="box">
                                            <div class="box-header">
                                                <span class="title">Cover Content</span>
                                            </div>
                                            <div class="box-content">
                                                <div class="padded" style="text-align: left; vertical-align: top">
                                                    <label>
                                                        <b>Content: </b>
                                                    </label>
                                                    @Html.TextAreaFor(m => m.content.CoverContent, new { style = "height:100px;width:98%;" })
                                                    <div style="text-align: center; margin-top:10px;">
                                                        <label style="display:inline;">
                                                            <b>Image: </b>
                                                        </label>
                                                        @Html.HiddenFor(m => m.content.FeaturedImage)
                                                        <input type="button" id="btnBImage" class="btn btn-small btn-blue" style="text-align: center; width: 80px;" value="Select" />
                                                        <input type="button" id="btnBRemove" class="btn btn-small btn-red" style="text-align: center; width: 80px;" value="Remove" />
                                                    </div>
                                                    <div style="text-align: center; margin-top:10px;">
                                                        @if (Model != null)
                                                        {
                                                            <img id="uploadedImage" style="max-height: 200px; max-width: 200px; " src="@Model.content.FeaturedImage" />
                                                        }
                                                        else
                                                        {
                                                            <img id="uploadedImage" style="max-height: 200px; max-width: 200px; " />
                                                        }
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                &nbsp;
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@{Html.RenderAction("GetMedia", "Media", new { isEditor = true });}

@section BottomScript{
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").delegate(".mce-menu-item", "click", function () {
                var did= $(this).attr("id");
                if(did.indexOf('slider')>0){
                    var id = $(this).attr("id").replace("-slider","");
                    var name = $("#"+did+"-text").text();
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Slider name=\"" + name + "\"&gt;" + id+ "&lt;/Slider&gt;");
                }
                else if(did.indexOf('-addon')!=-1){                    
                    if(did.indexOf('All')!=-1){
                        var name = $("#"+did+"-text").text();
                        tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Addon name=\"" + name + "\"&gt;All&lt;/Addon&gt;");
                        // to hide current popup
                        $(".mce-container.mce-panel.mce-floatpanel.mce-menu").each(function() {
                            if($(this).attr("role")=="application"){
                                $(this).hide();
                            }
                        });
                        var addonbutton = $("#mceu_18-open");
                        if(addonbutton)
                        {
                            addonbutton.click();
                        }
                        // end
                        //tinymce.execCommand('mceFocus',false,'content_Description');
                    }
                    else{
                        var id = $(this).attr("id").replace("-addon","");
                        var name = $("#"+did+"-text").text();
                        tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Addon name=\"" + name + "\"&gt;" + id+ "&lt;/Addon&gt;");
                    }
                }
            });
            //$("body").delegate(".mce-menu-item", "click", function () {
            //    var did= $(this).attr("id");
            //    if(did.indexOf('slider')>0){
            //        var id = $(this).attr("id").replace("-slider","");
            //        var name = $("#"+did+"-text").text();
            //        tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Slider name=\"" + name + "\"&gt;" + id+ "&lt;/Slider&gt;");
            //    }
            //    else if(did.indexOf('mceu')==-1){                    
            //        if(did.indexOf('AllAddons')!=-1){
            //            $(this).parent().find(".mce-menu-item").each(function( i ) {
            //                var id = $(this).attr("id");
            //                if (id.indexOf('AllAddons')==-1) {
            //                    var name = $("#"+id+"-text").text();
            //                    id = $(this).attr("id").replace("-addon","");;
            //                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Addon name=\"" + name + "\"&gt;" + id+ "&lt;/Addon&gt;");
            //                }
            //            });
            //        }
            //        else{
            //            var id = $(this).attr("id").replace("-addon","");
            //            var name = $("#"+did+"-text").text();
            //            tinyMCE.activeEditor.execCommand('mceInsertContent', false, "&lt;Addon name=\"" + name + "\"&gt;" + id+ "&lt;/Addon&gt;");
            //        }
            //    }
            //});
            @if (Model == null)
            {
                <text>
                    $("#content_Title").on("input", function () {
                        var currText = $("#content_Title").val();
                        var replacedText = currText.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
                        $("#editable-slug").html(replacedText);
                        $("#edit-slug-text").val(replacedText);
                        $("#content_URL").val(replacedText);
                    });
                </text>
            }
            $("#edit-slug").click(function () {
                $("#editable-slug").css("display", "none");
                $("#edit-slug-text").css("display", "");
                $("#edit-slug").css("display", "none");
                $("#save-slug").css("display", "");
                $("#cancel-slug").css("display", "");
            });
            $("#cancel-slug").click(function () {
                $("#edit-slug-text").val($("#editable-slug").html());
                $("#editable-slug").css("display", "");
                $("#edit-slug-text").css("display", "none");
                $("#edit-slug").css("display", "");
                $("#save-slug").css("display", "none");
                $("#cancel-slug").css("display", "none");
            });
            $("#save-slug").click(function () {
                $("#content_URL").val($("#edit-slug-text").val().trim());
                $("#editable-slug").css("display", "");
                $("#editable-slug").html($("#edit-slug-text").val().trim());
                $("#edit-slug-text").css("display", "none");
                $("#edit-slug").css("display", "");
                $("#save-slug").css("display", "none");
                $("#cancel-slug").css("display", "none");
            });
            $('#btnPublish').click(function () {
                $("#SaveType").val("Publish");
                tinyMCE.triggerSave();
                if (validpost()) {
                    $('#frm1').submit();
                }
            });
            $('#btnDraft').click(function () {
                $("#SaveType").val("SaveToDraft");
                tinyMCE.triggerSave();
                if (validpost()) {
                    $('#frm1').submit();
                }
            });
            function validpost() {
                if ($("#frm1").valid()) {
                    return true;
                }
                else {
                    var error = '<div class="alert alert-error"><button class="close" data-dismiss="alert" type="button">×</button>Please solve form errors</div>';
                    $("#containerfluid").html(error);
                }
            }
            $('#btnBRemove').click(function () {
                $('#content_FeaturedImage').val("");                
                $('#uploadedImage').attr("src", "");
                $('#uploadedImage').css("display", "none");
            });
            
            $('#btnBImage').click(function (e) {
                e.preventDefault();
                popuptype = "cover";
                $('#MediaPopup').modal("show");
            });
            $("body").delegate(".wizard-input-section .media-thumb .imgSelect", "click", function () {
                var imgPath = $(this).attr('src');
                if(popuptype=="cover")
                {
                    $('#content_FeaturedImage').val(imgPath);
                    $('#uploadedImage').attr("src", imgPath);
                    $('#uploadedImage').css("display", "");
                }
                else{   //editor
                    var url = imgPath;
                    var img = "<img src=\"" + url + "\"/>";                    
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, img);                    
                }
                $("#MediaPopup").modal("hide");
            });
            $('#pagePreview').click(function () {
                tinyMCE.triggerSave();

                if (validpost()) {
                    var str = $( "#frm1" ).serialize();    
                    console.log(str);
                    var slug = $("#content_URL").val();
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("Preview", "Page")",
                        data: str,
                        success: function (data) {
                            if (data == "success") {
                                //alert(data);
                                window.open('/Content/Details?prv=true&URL='+slug, "_blank");
                            }
                        },
                        error: function (data) {
                            alert('Sorry. Unable to Preview !!');
                        }
                    });
                }
            });
        });
    </script>
}
